<script setup>
import {useUsername} from '/src/store/username'
import {storeToRefs} from "pinia";

const {imgUrl, usernameInfo: {value: {user: {name}}}} = storeToRefs(useUsername())
</script>

<template>
  <div class="header-box">
    <!-- 左边div -->
    <div class="left">
      <slot name="title">测试标题</slot>
    </div>

    <!--    右边头像区域-->
    <div class="right">
      <!--      头像-->
      <img :src="imgUrl" alt="头像">
      <!--      用户名-->
      <span>{{ name }} </span>
      <!--      按钮-->
      <i class="iconfont icon-tuichu"></i>
    </div>
  </div>
</template>

<style scoped lang="less">
.iconfont {
  cursor: pointer;
}

.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;

  .left {
    font-size: 18px;
    color: #2A2929;
    letter-spacing: 0;
    font-weight: 500;
  }

  .right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;

    span {
      font-size: 14px;
      color: #072C56;
      letter-spacing: 0;
      font-weight: 400;
    }

    span::after {
      content: '|';
      margin: 0 10px;
      color: #ccc;
      font-size: 12px;
      line-height: 50px;
    }
  }
}

img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
</style>
